<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(map, index) in maps" :key="map.id" @click="addMap(map.name, index)">
        <div :class="['box-card', activeIndex === index ? 'active' : '']">
          <img :src="map.image" class="image" alt="map" />
          <div class="text">{{ map.sname }}</div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-checkbox-group v-model="checkList" style="display: flex;justify-content: center;">
    <el-checkbox label="地形" value="0" />
    <el-checkbox label="三维标注" value="1" />
    <el-checkbox label="二维标注" value="2" />
  
  </el-checkbox-group> -->
  </div>
</template>  
        
      <script setup>
import { ref } from 'vue'
const checkList = ref([])
const activeIndex = ref(0)
const maps = [
  { id: 1, name: '天地图影像', sname: '天地图影像', image: '/static/icon/tdt.png' },
  { id: 2, name: '天地图电子', sname: '天地图', image: '/static/icon/tdtv.png' },
  { id: 3, name: '高德影像', sname: '高德影像', image: '/static/icon/gd.jpg' },
  { id: 4, name: '高德电子', sname: '高德地图', image: '/static/icon/gdv.png' },
  { id: 5, name: '百度影像', sname: '百度影像', image: '/static/icon/arcgis.png' },
  { id: 6, name: '百度电子', sname: '百度地图', image: '/static/icon/bd.png' }
]

const addMap = (val, index) => {
  if (activeIndex.value === index) {
    return
  }
  activeIndex.value = index
  map3d.setBaseMap(val) // 根据id设置当前基础底图

  for (const element of viewer.imageryLayers._layers) {
    if (element._mars3d_config) {
      viewer.imageryLayers.lowerToBottom(element)
    }
  }
  if (val == '天地图影像' || val == '高德影像' || val == '百度影像') {
    var a = viewer.imageryLayers.get(0)
    if (a._mars3d_config.layer == 'img_z') {
      viewer.imageryLayers.raise(a)
    }
  }
  if (val == '天地图电子') {
    var a = viewer.imageryLayers.get(0)
    if (a._mars3d_config.layer == 'vec_z') {
      viewer.imageryLayers.raise(a)
    }
  }
}
</script>  
        
      <style lang="scss" scoped>
.box {
  padding: 15px;
}

.el-checkbox {
  color: #fff;
}
.image {
  width: 100%;
  display: block;
}

.text {
  font-size: 16px;
  color: #fff;
}
.box-card {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  img {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
}
.box-card:hover {
  cursor: pointer;
  background-color: rgb(0 25 51);
  border: 1px solid #0e9cff;
  box-shadow: 0 0 10px #1678e1;
}
.active {
  background-color: rgb(0 25 51);
  border: 1px solid #0e9cff;
  box-shadow: 0 0 10px #1678e1;
}
</style>